<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Aurelia 2 + jsDelivr, RealWorld with Router</title>

    <base href="/" />

    <!-- Performance optimizations -->
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/aurelia@latest/+esm" crossorigin fetchpriority="high">
    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@aurelia/router@latest/+esm" crossorigin>
    
    <style>
      body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
      nav { background: #f5f5f5; padding: 10px; margin-bottom: 20px; border-radius: 5px; }
      nav a { margin-right: 15px; text-decoration: none; color: #333; padding: 5px 10px; border-radius: 3px; }
      nav a:hover, nav a.active { background: #007acc; color: white; }
      .page { padding: 20px; border: 1px solid #ddd; border-radius: 5px; min-height: 300px; }
      .article { border-bottom: 1px solid #eee; padding: 15px 0; }
      .article:last-child { border-bottom: none; }
      .article h3 { margin: 0 0 10px 0; color: #007acc; }
      .article p { margin: 5px 0; color: #666; }
      .article .meta { font-size: 12px; color: #999; }
      .btn { padding: 8px 16px; background: #007acc; color: white; border: none; border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-block; }
      .btn:hover { background: #005a9e; }
      .btn-outline { background: transparent; color: #007acc; border: 1px solid #007acc; }
      .btn-outline:hover { background: #007acc; color: white; }
      input, textarea { padding: 8px; border: 1px solid #ddd; border-radius: 3px; width: 100%; box-sizing: border-box; margin-bottom: 10px; }
      .form-group { margin-bottom: 15px; }
      label { display: block; margin-bottom: 5px; font-weight: bold; }
    </style>
  </head>
  <body>
    <app-root></app-root>

    <script type="module">
      import { Aurelia, CustomElement } from 'https://cdn.jsdelivr.net/npm/aurelia@latest/+esm';
      import { RouterConfiguration } from 'https://cdn.jsdelivr.net/npm/@aurelia/router@latest/+esm';

      // Mock data
      const articles = [
        { 
          id: 1, 
          title: 'How to build web apps that scale', 
          description: 'This is the description for the post.',
          body: 'Web application performance is crucial for user experience. In this article, we explore various techniques to build scalable web applications...',
          author: 'Eric Simons',
          date: '2023-01-15',
          favorited: false,
          favoritesCount: 29 
        },
        { 
          id: 2, 
          title: 'The song you won\'t ever stop singing. No matter how hard you try.', 
          description: 'This is the description for the post.',
          body: 'Music has a powerful effect on our minds and emotions. Some songs get stuck in our heads for days or even weeks...',
          author: 'Albert Pai',
          date: '2023-01-10',
          favorited: true,
          favoritesCount: 32 
        }
      ];

      const Home = CustomElement.define({ 
        name: 'home', 
        template: `
          <div class="page">
            <h1>Conduit</h1>
            <p>A place to share your knowledge.</p>
            
            <h2>Global Feed</h2>
            <div repeat.for="article of articles" class="article">
              <h3>\${article.title}</h3>
              <p>\${article.description}</p>
              <div class="meta">
                By \${article.author} on \${article.date}
                <button class="btn \${article.favorited ? 'btn' : 'btn-outline'}" 
                        click.trigger="toggleFavorite(article)">
                  ♥ \${article.favoritesCount}
                </button>
                <a class="btn btn-outline" load="article/\${article.id}">Read more...</a>
              </div>
            </div>
          </div>
        `
      }, class {
        articles = articles;
        
        toggleFavorite(article) {
          article.favorited = !article.favorited;
          article.favoritesCount += article.favorited ? 1 : -1;
        }
      });
      
      const Article = CustomElement.define({ 
        name: 'article', 
        template: `
          <div class="page" if.bind="article">
            <h1>\${article.title}</h1>
            <div class="meta">
              By \${article.author} on \${article.date}
              <button class="btn \${article.favorited ? 'btn' : 'btn-outline'}" 
                      click.trigger="toggleFavorite()">
                ♥ \${article.favoritesCount}
              </button>
            </div>
            <hr>
            <div>
              <p>\${article.body}</p>
            </div>
            <hr>
            <a class="btn btn-outline" load="../">← Back to Home</a>
          </div>
          <div class="page" else>
            <p>Article not found.</p>
            <a class="btn" load="../">← Back to Home</a>
          </div>
        `
      }, class {
        article = null;
        
        load(params) {
          const id = parseInt(params.id);
          this.article = articles.find(a => a.id === id);
        }
        
        toggleFavorite() {
          if (this.article) {
            this.article.favorited = !this.article.favorited;
            this.article.favoritesCount += this.article.favorited ? 1 : -1;
          }
        }
      });

      const Editor = CustomElement.define({ 
        name: 'editor', 
        template: `
          <div class="page">
            <h1>\${isEditing ? 'Edit Article' : 'New Article'}</h1>
            <form submit.trigger="saveArticle()">
              <div class="form-group">
                <label>Article Title</label>
                <input type="text" value.bind="title" placeholder="Article Title" required>
              </div>
              <div class="form-group">
                <label>What's this article about?</label>
                <input type="text" value.bind="description" placeholder="What's this article about?" required>
              </div>
              <div class="form-group">
                <label>Write your article (in markdown)</label>
                <textarea rows="8" value.bind="body" placeholder="Write your article (in markdown)" required></textarea>
              </div>
              <button type="submit" class="btn">Publish Article</button>
              <a class="btn btn-outline" load="../">Cancel</a>
            </form>
          </div>
        `
      }, class {
        title = '';
        description = '';
        body = '';
        isEditing = false;
        
        load(params) {
          if (params.id) {
            const article = articles.find(a => a.id === parseInt(params.id));
            if (article) {
              this.title = article.title;
              this.description = article.description;
              this.body = article.body;
              this.isEditing = true;
            }
          } else {
            this.title = '';
            this.description = '';
            this.body = '';
            this.isEditing = false;
          }
        }
        
        saveArticle() {
          if (this.isEditing) {
            // Update existing article
            const article = articles.find(a => a.title === this.title);
            if (article) {
              article.description = this.description;
              article.body = this.body;
            }
          } else {
            // Create new article
            const newArticle = {
              id: Math.max(...articles.map(a => a.id)) + 1,
              title: this.title,
              description: this.description,
              body: this.body,
              author: 'You',
              date: new Date().toISOString().split('T')[0],
              favorited: false,
              favoritesCount: 0
            };
            articles.push(newArticle);
          }
          
          // Navigate back to home
          window.location.hash = '';
        }
      });

      const About = CustomElement.define({ 
        name: 'about', 
        template: `
          <div class="page">
            <h1>About Conduit</h1>
            <p>This is a demo application built with Aurelia 2 loaded directly from jsDelivr CDN.</p>
            <h2>Features Demonstrated:</h2>
            <ul>
              <li>✅ Router configuration with multiple routes</li>
              <li>✅ Component navigation and parameters</li>
              <li>✅ Data binding and event handling</li>
              <li>✅ Form handling and validation</li>
              <li>✅ Conditional rendering</li>
              <li>✅ Repeating templates</li>
              <li>✅ Fragment hash routing for static hosting</li>
            </ul>
            <h2>Technical Details:</h2>
            <ul>
              <li>🚀 No build tools required</li>
              <li>📦 Uses jsDelivr CDN for optimal performance</li>
              <li>⚡ Includes performance optimizations (modulepreload)</li>
              <li>🎯 Works offline after initial load</li>
            </ul>
            <a class="btn" load="../">← Back to Home</a>
          </div>
        `
      });

      const App = CustomElement.define({
        name: 'app-root',
        template: `
          <nav>
            <a load="home" class="\${isActive('') || isActive('home') ? 'active' : ''}">Home</a>
            <a load="editor" class="\${isActive('editor') ? 'active' : ''}">New Article</a>
            <a load="about" class="\${isActive('about') ? 'active' : ''}">About</a>
          </nav>
          <au-viewport></au-viewport>
        `,
        dependencies: [Home, Article, Editor, About]
      }, class {
        static routes = [
          { path: ['', 'home'], component: Home, title: 'Home' },
          { path: 'article/:id', component: Article, title: 'Article' },
          { path: 'editor/:id?', component: Editor, title: 'Editor' },
          { path: 'about', component: About, title: 'About' }
        ];
        
        isActive(route) {
          return window.location.hash.includes(route);
        }
      });

      new Aurelia()
        .register(RouterConfiguration.customize({ useUrlFragmentHash: true }))
        .app({ component: App, host: document.querySelector('app-root') })
        .start();
    </script>
  </body>
</html>